<template>
  <!-- <transition name="todo" appear> -->
    <li class="item">
      <label :for="todo.id">
        <input type="checkbox" :checked="todo.done" @change="hanldeClick(todo.id)">
        <!-- 
          也可以实现功能 
          只是vue没有深度监听到 所以不报错  
          如果是浅层的会 直接报错 
          因为v-model 是双向数据绑定 会影响props的值（只读）
        -->
        <!-- <input type="checkbox" v-model="todo.done"> -->
        <span v-show="!todo.isEdit">{{todo.title}}</span>
        <input 
          type="text" 
          v-show="todo.isEdit" 
          :value="todo.title"
          @blur="handleBlur(todo, $event)"
          ref="inputTitle"
        >
      </label>
      <button class="btn btn-danger" @click="handleDel(todo.id)">删除</button>
      <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">修改</button>
    </li>
  <!-- </transition> -->
</template>

<script>
  import pubsub from 'pubsub-js'

  export default {
    name: "MyItem",
    // 声明接收todo对象
    props: ['todo'],
    methods: {
      hanldeClick(id) {
        // 通知App组件将对应的todo对象的done值取反
        // this.checkTodo(id)
        this.$bus.$emit("checkTodo", id);
      },
      handleDel(id) {
        if(confirm('确定删除吗？')) {
          // this.deleteTodo(id)
          // this.$bus.$emit("deleteTodo", id);
          pubsub.publish('deleteTodo', id)
        }
      },
      handleEdit(todo) {
        // todo.isEdit = true     // 只是赋值 但是并未生效 没有响应式数据

        // if(todo.isEdit) {      // 不完美  可能有值 但是是false
        if(todo.hasOwnProperty('isEdit')) {       
          todo.isEdit = true;
        } else {
          this.$set(todo, 'isEdit', true);
        }
        /* 
          此方法中的所有程序都执行完毕
          Vue才开始渲染模板
          所以获取焦点的  先于页面input元素出现 故不奏效

          方案一：
          setTimeout(()=> {
            this.$refs.inputTitle.focus()
          }, 200)

          方案二：
          当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行
          this.$nextTick(function(){
            this.$refs.inputTitle.focus()
          })

        */
        this.$nextTick(function(){
          this.$refs.inputTitle.focus()
        })
      },
      handleBlur(todo, e) {
        todo.isEdit = !todo.isEdit
        // todo.title = e.target.value
        if(!e.target.value) return alert("输入不能为空")    
        this.$bus.$emit('updateTodo', todo.id, e.target.value);
      }
    },
  }
</script>

<style lang="less">
  .item {
    padding: 10px 6px;
    & + .item {
      border-top: 1px solid #ddd;
    }
    &:hover {
      background-color: #dfdfdf;
      .btn {
        display: block;
      }
    }
    &:after {
      display: block;
      content: "";
      clear: both;
    }
  }
  .btn {
    float: right;
    display: none;
    margin-top: -4px;
  }

  /* 进入时激活 */
  /* .todo-enter-active {
    animation: atguigu 0.5s linear;
  } */

  /* 离开时激活 */
  /* .todo-leave-active {
    animation: atguigu 0.5s linear reverse;
  } */

  /* @keyframes atguigu {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  } */
</style>